<template>
  <div class="address-apply-bg">
    <NormalForm :operateForm="operateForm" :formList="formList" :enumOpt="enumOpt" pageTitle="保单分单地址变更申请"></NormalForm>
    <el-card class="my-normal-table-bg">
      <div slot="header" class="page-title-bg">
        <div class="page-title">
          <div class="title-icon"></div>
          <span>查询结果</span>
        </div>
        <el-button type="primary" size="small">导入</el-button>
      </div>
      <el-table ref="myTable" :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="机构代码" prop="comCode" align="center" min-width="100"></el-table-column>
        <el-table-column label="机构名称" prop="comName" align="center" min-width="160"></el-table-column>
        <el-table-column label="保单号" prop="contNo" align="center" min-width="160"></el-table-column>
        <el-table-column label="变更前分单地址" prop="address1" align="center" min-width="320"></el-table-column>
        <el-table-column label="变更后地址" prop="address2" align="center" min-width="320"></el-table-column>
        <el-table-column label="变更后邮编" prop="postCode" align="center" min-width="120"></el-table-column>
        <el-table-column label="申请原因" prop="reason" align="center" min-width="320"></el-table-column>
        <el-table-column label="备注" prop="desc" align="center" min-width="160"></el-table-column>
        <el-table-column label="附件" prop="fileName" align="center" min-width="160">
          <template slot-scope="scope">
            <el-button type="text" size="mini">{{ scope.row.fileName }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="margin-top: 20px">
        <el-button type="primary" size="small" :disabled="this.currentApplyList.length == 0" @click="applyFn()">申请</el-button>
        <el-button type="danger" size="small" :disabled="this.currentApplyList.length == 0" @click="deleteFn()">删除</el-button>
      </div>
    </el-card>
    <el-dialog title="提示" :visible.sync="applyVisible" width="520px">
      <span>您正在提交保单分单地址变更的申请，确认至审核吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="applyVisible = false">取 消</el-button>
        <el-button type="primary" @click="applyVisible = false">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="删除" :visible.sync="deleteVisible" width="520px">
      <span>确定删除选中的该条数据吗?</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="deleteVisible = false">取 消</el-button>
        <el-button type="primary" @click="deleteVisible = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import NormalForm from "../components/normalForm.vue";

export default {
  name: 'AddressApply',
  components: {
    NormalForm
  },
  data() {
    return {
      // 表单
      operateForm: {
        comCode: '',
        applyName: '',
      },
      formList: [
        {
          label: '所属机构',
          value: null,
          prop: 'comCode',
          type: 'SELECT',
          emunName: 'comList'
        },
        {
          label: '申请人',
          value: null,
          prop: 'applyName',
          type: 'INPUT',
          emunName: ''
        },
      ],
      enumOpt: {
        comList: [],
      },
      // 表格
      tableData: [
      	{
          comCode: '860101',
          comName: 'xxxx人寿无锡分公司',
          contNo: '0000024915501888',
          address1: '江苏省无锡市北塘区黄巷镇庄前村西陈巷108号',
          address2: '江苏省无锡市惠山区洛社镇正明村前旺桥12号',
          postCode: '214100',
          reason: '客户搬迁地址变更',
          desc: '',
          fileName: ''
        },
        {
          comCode: '860101',
          comName: 'xxxx人寿无锡分公司',
          contNo: '0002662918021888',
          address1: '江苏省无锡市锡山区东亭街道老街路39-6号30室',
          address2: '江苏省无锡市惠山区洛社镇张镇家园D区167号401室',
          postCode: '214100',
          reason: '客户和子女同住，地址变更为子女住址',
          desc: '',
          fileName: ''
        },
        {
          comCode: '860101',
          comName: 'xxxx人寿无锡分公司',
          contNo: '0002350418541888',
          address1: '江苏省无锡市锡山区东北塘街道梓旺苑73号502室',
          address2: '江苏省无锡市滨湖区万达广场D区13-2801',
          postCode: '214026',
          reason: '客户搬迁地址变更',
          desc: '',
          fileName: ''
        },
        {
          comCode: '860101',
          comName: 'xxxx人寿无锡分公司',
          contNo: '0000313516271888',
          address1: '江苏省无锡市南长区融创运河壹号33-202',
          address2: '江苏省无锡市江阴市周庄镇鸡龙山村后郭桥161号',
          postCode: '214424',
          reason: '客户搬迁地址变更',
          desc: '',
          fileName: ''
        },
        {
          comCode: '860101',
          comName: 'xxxx人寿无锡分公司',
          contNo: '0002248018631888',
          address1: '江苏省无锡市北塘区通惠中路59号',
          address2: '江苏省无锡市滨湖区军嶂新村264号101室',
          postCode: '214026',
          reason: '客户搬迁地址变更',
          desc: '',
          fileName: ''
        },
      ],
      currentApplyList: [],
      applyVisible: false,
      deleteVisible: false,
    }
  },
  mounted() {},
  methods: {
    handleSelectionChange(e) {
      console.log(e)
      this.currentApplyList = e;
    },
    applyFn() {
      this.applyVisible = true;
    },
    deleteFn() {
      this.deleteVisible = true;
    },
  },
}
</script>

<style lang="scss" scoped>
.my-normal-table-bg {
  padding: 16px;
  margin-top: 20px;
  .page-title-bg{
    display: flex;
    justify-content: space-between;
    .page-title {
      display: flex;
      align-items: center;
      font-size: 18px;
      font-family: PingFangSC-Medium, PingFang SC;
      font-weight: 500;
      color: #2a2a2a;
      margin: 0 10px;
      .title-icon {
        width: 8px;
        height: 22px;
        background-color: #082aff;
        margin-right: 10px;
      }
    }
  }
  .cont-state {
    display: inline-block;
    width: 60px;
    text-align: center;
    padding: 6px 0;
    font-size: 12px;
  }
  .cont-state-a{
    color: #0083af;
    background-color: rgb(127 229 255 / 62%);
  }
  .cont-state-b{
    color: #fff;
    background-color: #ff0000b1;
  }
  ::v-deep.el-card__header {
    padding: 8px 0 10px 0;
    border: 0;
  }
}
</style>
